<template>
  <div class="">
    <div class="page-filter mb10 fl">
      <el-form ref="filter" :model="filter" label-width="0">
        <el-form-item class="mr10 mb5 fl">
          <el-input v-model="filter.name" placeholder="品名" size="small" clearable />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" style="width: 450px">
          <el-button class="fl" type="primary" size="small" @click="getList">查 询</el-button>
          <el-button class="fl" type="primary" size="small" @click="handleDialog({
            dTitle: '添加库存',
            dType: 'add',
            dField: dField
          })">新 增</el-button>
          <el-upload class="fl"
            style="margin-left: 10px;height: 32px; line-height: 1"
            :limit=1
            ref="upload"
            action="#"
            accept=".xlsx"
            list-type="text"
            :http-request="handleUpload"
            :on-change="fileChange"
            :show-file-list="false"
            >
              <el-button type="primary" size="small">导 入</el-button>
          </el-upload>
          <el-button class="fl ml10" type="primary" size="small" @click="handleOut">导 出</el-button>
          <a class="fl" href="javascript:void(0)" @click="handleMudule" style="color: blue;margin-left: 10px;">模板.xlsx</a>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="app.loading" class="search-table" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="序号" align="center" width="56px">
        <template slot-scope="{$index}">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="品名" width="160px" prop="name" />
      <el-table-column label="规格型号" width="260px" prop="sku" />
      <el-table-column label="材质" width="320px" prop="parameter" />
      <el-table-column label="品牌" width="140px" prop="brand" />
      <el-table-column label="单位" width="90px" prop="unit" />
      <el-table-column label="库存" align="right" width="80px" prop="num" />
      <el-table-column label="单价" align="right" width="80px">
        <template slot-scope="{row}">
          {{ app.toFix(row.price, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="260px" prop="remark" />
      <el-table-column label="操作" align="center" width="90px" fixed="right">
        <template slot-scope="{row}">
          <el-dropdown>
            <el-button type="primary" size="mini">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDialog({...row, ...{dTitle: '修改库存', dType: 'edit', dField: dField}})">编 辑</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="filter.pageAll>0" :total="filter.pageAll" :page.sync="filter.pageCurrent" :limit.sync="filter.pageNumber" @pagination="getList" />
    <Dialog ref="dialog" :get-data="getList" :info="dialog" />
  </div>
</template>

<script>
import { inventorys, outInventorys } from '@/api/material/inventory'
import { module, data } from '@/api/file'
import Dialog from './components/inventory-dialog'
import page from '@/utils/page'

export default {
  name: '',
  components: { Dialog },
  extends: page,
  props: {
    reqList: {
      default: inventorys,
      type: Function
    }
  },
  data() {
    return {
      url: '',
      dField: ['id', 'name', 'sku', 'parameter', 'brand', 'unit', 'price', 'num', 'remark']
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleUpload(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 'inventory')
      data(formData).then(res => {
        this.getList()
        this.$message.success('导入成功')
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleMudule() {
      module({
        fileName: 'inventory.xlsx'
      }).then(response => {
        this.out(response)
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleOut() {
      outInventorys({
        ...this.filter
      }).then(response => {
        this.out(response)
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
